

<!-- 卡包列表 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="卡包" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 卡包列表 -->
		<view v-if="cardList && cardList.length" class="cardList-Container">
			<view @click="gotoCardDetail(item.customerCardId)" v-for="(item, index) in cardList" :key="index" class="cardItem">
				<image class="cardCover" :src="imgSite + item.cardImg"></image>
				<view class="timeStatus">
					<view class="time">
						{{item.startDt | formatDate}}-{{item.endDt | formatDate}}
					</view>
					
					<!-- 是否核销 10：未使用 20：已核销 30：已过期 -->
					<view v-if="item.isUse == 10" class="status unUse">
						未使用
					</view>
					<view v-if="item.isUse == 20" class="status">
						已核销
					</view>
					<view v-if="item.isUse == 30" class="status">
						已过期
					</view>
				</view>
			</view>
		</view>
		<g-empty v-else></g-empty>
	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		filters: {
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '.';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

				return YY + MM + DD;
			}
		},
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
				},
				
				//卡包列表
				cardList: []
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		onLoad() {
			
			var that = this;
			that.$api.globalUtil.requestAjax({
				url: '/CardApi/findCardByCustomerIdForApi',
				method: 'POST',
				success: function(res) {
					that.cardList = res.data.response || [];
				}
			});
		},
		methods:{
			
			//卡片详情
			gotoCardDetail(customerCardId) {
				uni.navigateTo({
					url: 'cardDetail?customerCardId='+customerCardId
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//卡包列表
	.cardList-Container {
		padding-top: 20rpx;
		
		.cardItem {
			position: relative;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width:690rpx;
			height:458rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			overflow: hidden;
			
			.cardCover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 370rpx;
			}
			
			.timeStatus {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 0 30rpx;
				width: 100%;
				height: 88rpx;
				background:rgba(255,255,255,1);
				
				.time {
					font-size:26rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(51,51,51,1);
				}
				
				.status {
					font-size:26rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(51,51,51,1);
					
					&.unUse {
						color: #E01228;
					}
				}
			}
		}
	}
</style>
